<!--
 * @Author: wangding
 * @Date: 2020-10-22 17:14:47
 * @LastEditTime: 2021-02-18 17:38:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\system\role\add.vue
-->
<template>
    <div>
        <el-dialog
            :title="$t('site.siteLinkWifiSn')"
            :visible="visibleBind"
            width="40%"
            @close="()=>{$store.commit('setVisibleBind',false)}">
            <el-form ref="form" :model="form" label-width="180px" >
                <el-row :gutter="24">
                    <el-col :span="18">
                        <template v-for="(item, index) in form.wifiSNdata" >
                            <el-form-item 
                                :key="item.key" 
                                :label="$t('devWifi.wifiSN')+(index==0?'':index+1)" 
                                :prop="'wifiSNdata.'+index+'.wifiSN'"
                                :rules="[{ required: true, message: $t('index_js_notNull')},{ validator:test_wifiSN, trigger:'blur'}]">
                                    <el-input v-big v-model="item.wifiSN" :placeholder="$t('devWifi.wifiSN')+(index==0?'':index+1)"></el-input>
                                    <el-tooltip effect="light" class="icon-nmi" placement="right">
                                        <div slot="content" style="width:200px;">
                                            <img src="../../assets/img/wifiMessage.png" alt="" width="100%">
                                        </div>
                                        <i class="el-icon-question iconClass"></i>
                                    </el-tooltip>
                                    <i class="el-icon-circle-plus-outline" @click="add()" btn-add></i>
                                    <i class="el-icon-remove-outline" @click="remove(index)" btn-remove v-if="index!=0"></i>
                            </el-form-item>
                            <el-form-item :key="index">
                                <el-input v-model="item.remark" :placeholder="$t('devWifi.note')+(index==0?'':index+1)"></el-input>
                            </el-form-item>
                        </template>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setVisibleBind',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('save')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {
        selRow:''
    },
    data() {
        this.test_wifiSN = async(rule, value, callback) => {
            let res = await this.API.checkWifiSNByUser({
                wifiSn:value,
                userIds:this.selRow.userIds,
                siteId:this.selRow.ids
            })
            if (res == '2') {
                callback(new Error(this.$t('login.js_sign_wifisn_error')));
            }else if (res == '3') {
                callback(new Error(this.$t('login.js_sign_wifisn_registered')));
            }else{
                callback();
            }
        }
        return {
            form:{
                wifiSNdata:[{
                    wifiSN: '',
                    packageId:'',
                    remark: '',
                    key: Date.now()
                }]
            }
        };
    },
    computed: {
        visibleBind(){
            return this.$store.state.sysStore.visibleBind
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {

    },
    methods: {
        add(){
            this.form.wifiSNdata.push({
                wifiSN: '',
                packageId:'',
                remark: '',
                key: Date.now()
            });
        },
        remove(index){
            this.form.wifiSNdata.splice(index,1)
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  this.submit()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        async submit(){
            let wifiSNs=[],remarks=[],packageIds=[]
            this.form.wifiSNdata.forEach(item => {
                wifiSNs.push(item.wifiSN)
                remarks.push(item.remark||'-')
                packageIds.push(item.packageId||'-')
            });
            let res = await this.API.bindSiteWifiSN({
                wifiSN:wifiSNs.join(),
                packageIds:packageIds.join(),
                notes:remarks.join(' --split-- '),
                siteId:this.selRow.ids,
                domain:window.location.host,
                updateTime:this.$options.filters['dateFormat'](new Date())
            })
            if(res.success){
                this.$message.success(this.$t('index.control_success'));
            }else{
                this.$message.error(this.$t('index.control_fail'));
            }
            this.$store.commit('setVisibleBind',false)
            this.$emit('uploadPage',true)
        }
    },
};
</script>

<style  lang="less">
    [btn-add],[btn-remove]{
        position: absolute;
        right: -40px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24px;
        color: #828282;
        cursor: pointer;
        &:hover{
            color: #e6a300;
        }
    }
    .iconClass{
        margin-top: -3px;
        font-size: 16px;
        color: #666;
        vertical-align: middle;
    }
    [btn-add]{
        right: -40px;
    }
    [btn-remove]{
        right: -80px;
    }
</style>
